﻿@using RuoVea.ExDto
@using RuoVea.OmiArticle.Attributes
@using RuoVea.OmiArticle
@using RuoVea.OmiArticle.Language
@using RuoVea.OmiArticle.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(i18n.content_management)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style>.el-button [class*="el-icon-"] + span { margin-left: 1px !important; } #toolbar-container { position: sticky; top: 0; z-index: 1000; background: #fff;} </style>
</head>
<body>
    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange"
                   :cell-style="cellStyle"
                   v-on:on-load="onLoad">

            <template slot="coverImage" slot-scope="scope">
                <el-avatar shape="square" :src="scope.row.coverImage">{{scope.row.title}} </el-avatar>
            </template>

            <template slot="record" slot-scope="scope">
                <modify-record :data="scope.row"></modify-record>
            </template>
           
            <template slot-scope="{size}" slot="menuLeft">
                <el-button :size="size" type="primary" icon="el-icon-plus" @@click="handleDictValue(null,0,'add')" v-if="option.add_Btn"> {{i18n.t('add')}} </el-button>
            </template>

            <template slot-scope="{type,size,row,index}" slot="menuBefore">
                <el-button :size="size" :type="type" icon="el-icon-view" @@click="handleDictValue(row,index,'view')" v-if="option.view_Btn"> {{i18n.t('view')}} </el-button>
                <el-button :size="size" :type="type" icon="el-icon-edit" @@click="handleDictValue(row,index,'edit')" v-if="option.edit_Btn"> {{i18n.t('edit')}} </el-button>
            </template>
        </avue-crud>

               <el-open-web :dialogtitle="dialogtitle" ref="iframe" v-bind:dialogvisible="dictValueDialogVisible"
                     dialogwidth="1050px" :url="dictValueUrl" v-on:close="onClose" dialogstyle="width:1030px;height:780px;"></el-open-web>

    </div>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script>
        Vue.prototype.i18n.messages.zhCN = { 
            ...Vue.prototype.i18n.messages.zhCN, 
            ...{
                "category": "所属分类",
                "property_value": "属性值",
                "dictionary_value": "字典值",
                "is_default": "是否默认", 
                "Display Text": "显示文本", 
                "Tag Type": "标签类型", 
                "Style (Style)": "样式(Style)", 
                "Style (Class)": "样式(Class)", 
                "Extended Data": "拓展数据",
                "title": "标题",
                "subtitle": "副标题",
                "summary": "摘要",
                "cover_image": "封面图片",
                "seo_title": "SEO标题",
                "seo_keywords": "SEO关键词",
                "seo_description": "SEO描述",
                "canonical_url": "规范URL",
                "category": "类别",
                "tags": "标签",
                "status": "状态",
                "draft": "草稿",
                "published": "已发布",
                "offline": "已下架",
                "is_top": "置顶",
                "is_featured": "精选",
                "view_count": "阅读数",
                "like_count": "点赞数",
                "is_comment_allowed": "允许评论",
                "comments_count": "评论数",
                "sort": "排序",
                "modification_record": "修改记录",
                "parent_node_cannot_select_self": "上级节点不能选择自己"
            } 
        };
        
        Vue.prototype.i18n.messages.en = { 
            ...Vue.prototype.i18n.messages.en, 
            ...{
                "category": "Belongs to Category",
                "property_value": "Property Value",
                "dictionary_value": "Dictionary Value",
                "is_default": "Is Default",
                "Display Text": "Display Text", 
                "Tag Type": "Tag Type", 
                "Style (Style)": "Style (Style)", 
                "Style (Class)": "Style (Class)", 
                "Extended Data": "Extended Data",
                "title": "Title",
                "subtitle": "Subtitle",
                "summary": "Summary",
                "cover_image": "Cover Image",
                "seo_title": "SEO Title",
                "seo_keywords": "SEO Keywords",
                "seo_description": "SEO Description",
                "canonical_url": "Canonical URL",
                "category": "Category",
                "tags": "Tags",
                "status": "Status",
                "draft": "Draft",
                "published": "Published",
                "offline": "Offline",
                "is_top": "Top",
                "is_featured": "Featured",
                "view_count": "View Count",
                "like_count": "Like Count",
                "is_comment_allowed": "Allow Comments",
                "comments_count": "Comments Count",
                "sort": "Sort",
                "modification_record": "Modification Record",
                "parent_node_cannot_select_self": "Cannot select self as parent node"
            } 
        };
        
        Vue.prototype.i18n.messages.fr = { 
            ...Vue.prototype.i18n.messages.fr, 
            ...{
                "category": "Catégorie associée",
                "property_value": "Valeur de propriété",
                "dictionary_value": "Valeur de dictionnaire",
                "is_default": "Par défaut",
                "Display Text": "Texte affiché", 
                "Tag Type": "Type de balise", 
                "Style (Style)": "Style (Style)", 
                "Style (Class)": "Style (Class)", 
                "Extended Data": "Données étendues",
                "title": "Titre",
                "subtitle": "Sous-titre",
                "summary": "Résumé",
                "cover_image": "Image de couverture",
                "seo_title": "Titre SEO",
                "seo_keywords": "Mots-clés SEO",
                "seo_description": "Description SEO",
                "canonical_url": "URL canonique",
                "category": "Catégorie",
                "tags": "Étiquettes",
                "status": "Statut",
                "draft": "Brouillon",
                "published": "Publié",
                "offline": "Hors ligne",
                "is_top": "Épinglé",
                "is_featured": "En vedette",
                "view_count": "Nombre de vues",
                "like_count": "Nombre de j'aime",
                "is_comment_allowed": "Autoriser les commentaires",
                "comments_count": "Nombre de commentaires",
                "sort": "Tri",
                "modification_record": "Historique des modifications",
                "parent_node_cannot_select_self": "Impossible de se sélectionner soi-même comme nœud parent"
            } 
        };
        
        Vue.prototype.i18n.messages.ja = { 
            ...Vue.prototype.i18n.messages.ja, 
            ...{
                "category": "所属カテゴリ",
                "property_value": "プロパティ値", 
                "dictionary_value": "辞書値",
                "is_default": "デフォルトかどうか",
                "Display Text": "表示テキスト", 
                "Tag Type": "タグの種類", 
                "Style (Style)": "スタイル（Style）", 
                "Style (Class)": "スタイル（Class）", 
                "Extended Data": "拡張データ",
                "title": "タイトル",
                "subtitle": "サブタイトル",
                "summary": "要約",
                "cover_image": "カバー画像",
                "seo_title": "SEOタイトル",
                "seo_keywords": "SEOキーワード",
                "seo_description": "SEO説明",
                "canonical_url": "正規URL",
                "category": "カテゴリ",
                "tags": "タグ",
                "status": "ステータス",
                "draft": "下書き",
                "published": "公開済み",
                "offline": "非公開",
                "is_top": "トップ表示",
                "is_featured": "おすすめ",
                "view_count": "閲覧数",
                "like_count": "いいね数",
                "is_comment_allowed": "コメント許可",
                "comments_count": "コメント数",
                "sort": "並び順",
                "modification_record": "変更記録",
                "parent_node_cannot_select_self": "自身を親ノードとして選択できません"
            } 
        };
        
        Vue.prototype.i18n.messages.vi = { 
            ...Vue.prototype.i18n.messages.vi, 
            ...{
                "category": "Phân loại thuộc về",
                "property_value": "Giá trị thuộc tính",
                "dictionary_value": "Giá trị từ điển",
                "is_default": "Có phải mặc định không",
                "Display Text": "Văn bản hiển thị", 
                "Tag Type": "Loại thẻ", 
                "Style (Style)": "Kiểu (Style)", 
                "Style (Class)": "Kiểu (Class)", 
                "Extended Data": "Dữ liệu mở rộng",
                "title": "Tiêu đề",
                "subtitle": "Phụ đề",
                "summary": "Tóm tắt",
                "cover_image": "Ảnh bìa",
                "seo_title": "Tiêu đề SEO",
                "seo_keywords": "Từ khóa SEO",
                "seo_description": "Mô tả SEO",
                "canonical_url": "URL chuẩn",
                "category": "Danh mục",
                "tags": "Thẻ",
                "status": "Trạng thái",
                "draft": "Bản nháp",
                "published": "Đã xuất bản",
                "offline": "Đã gỡ xuống",
                "is_top": "Ghim lên đầu",
                "is_featured": "Nổi bật",
                "view_count": "Lượt xem",
                "like_count": "Lượt thích",
                "is_comment_allowed": "Cho phép bình luận",
                "comments_count": "Số bình luận",
                "sort": "Sắp xếp",
                "modification_record": "Lịch sử chỉnh sửa",
                "parent_node_cannot_select_self": "Không thể chọn chính mình làm nút cha"
            } 
        };
        
        Vue.prototype.i18n.messages.zhTW = { 
            ...Vue.prototype.i18n.messages.zhTW, 
            ...{
                "category": "所属分类",
                "property_value": "属性值",
                "dictionary_value": "字典值",
                "is_default": "是否默认", 
                "Display Text": "顯示文本", 
                "Tag Type": "標籤類型", 
                "Style (Style)": "樣式(Style)", 
                "Style (Class)": "樣式(Class)", 
                "Extended Data": "擴展數據",
                "title": "標題",
                "subtitle": "副標題",
                "summary": "摘要",
                "cover_image": "封面圖片",
                "seo_title": "SEO標題",
                "seo_keywords": "SEO關鍵詞",
                "seo_description": "SEO描述",
                "canonical_url": "規範URL",
                "category": "類別",
                "tags": "標籤",
                "status": "狀態",
                "draft": "草稿",
                "published": "已發布",
                "offline": "已下架",
                "is_top": "置頂",
                "is_featured": "精選",
                "view_count": "閱讀數",
                "like_count": "點讚數",
                "is_comment_allowed": "允許評論",
                "comments_count": "評論數",
                "sort": "排序",
                "modification_record": "修改記錄",
                "parent_node_cannot_select_self": "上級節點不能選擇自己"
            } 
        };
    </script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>
    <script>
            var statusData = [
                { label: `${Vue.prototype.i18n.t('draft')}`, value: 0, },
                { label: `${Vue.prototype.i18n.t('published')}`, value: 1, },
                { label: `${Vue.prototype.i18n.t('offline')}`, value: 2, }
            ];
          var yesnoData = [
                { label: `${Vue.prototype.i18n.t('yes')}`, value: 1, },
                { label: `${Vue.prototype.i18n.t('no')}`, value: 0, },
            ];

         var article=   new Vue({
                el: '#app',
                data() {
                    return {

                        name: "article",
                        pageUrl: "/article/pages",
                        addUrl: "/article/add",
                        editUrl: "/article/update",
                        deleteUrl: "/article/delete",

                        pageOption: {
                            total: 0,
                            page: 1,
                            pageSize: 10
                        },
                        loading: true,
                        btnLoading: false,
                        tableData: [],
                        searchParams: {},

                        currentEditId:null,

                        option: {
                            searchShowBtn: Permissions.avePermission(`article:pages`),
                            refreshBtn: Permissions.avePermission(`article:pages`),
                            add_Btn: Permissions.avePermission(`article:addData`),
                            edit_Btn: Permissions.avePermission(`article:updateData`),
                            delBtn: Permissions.avePermission(`article:deleteData`),
                            view_Btn: Permissions.avePermission(`article:data`),
                            // tree:true,
                            // treeProps:{
                            //     children: 'children',
                            //     hasChildren: 'hasChildren'
                            // },

                            addBtn:false,
                            editBtn:false, 
                            viewBtn:false,

 

 
                            defaultExpandAll: true,
                            rowKey: 'id',
                            searchShow: false,
                            dialogWidth:"100%",
                            column: [
                                { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },

                                { prop: "title", label: `${this.i18n.t('title')}`, search: true, hide: false, type: "input", clearable: true,overHidden:true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                                { prop: "subtitle", label: `${this.i18n.t('subtitle')}`, type: 'textarea', hide: false, showColumn: false, span: 24, rows: 2,overHidden:true, },
                                { prop: "summary", label: `${this.i18n.t('summary')}`, type: 'textarea', hide: false, showColumn: false, span: 24, rows: 2,overHidden:true, },

                                { prop: "coverImage", label: `${this.i18n.t('cover_image')}`, type: 'input', hide: false, showColumn: false, width: '120',},
                                 
                                
                                { prop: "seo.metaTitle", label: `${this.i18n.t('seo_title')}`, type: 'input', hide: true, showColumn: false, span: 24, rows: 2, },
                                { prop: "seo.metaKeywords", label: `${this.i18n.t('seo_keywords')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                                { prop: "seo.metaDescription", label: `${this.i18n.t('seo_description')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                                { prop: "seo.canonicalUrl", label: `${this.i18n.t('canonical_url')}`, type: 'input', hide: true, showColumn: false, span: 24, rows: 2, },

                                { prop: "categorieIds", label: `${this.i18n.t('category')}`, search: true, hide: false, value: ``,width: '120',type: "select", dicFlag: true,
                                dicUrl: `/category/list`, dicMethod: 'get', props: { label: "name", value: "id" },
                                    rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` },],
                                },
                                    
                                { prop: "tagIds", label: `${this.i18n.t('tags')}`, search: true, hide: false, value: ``,type: "select", dicFlag: true,multiple: true,
                                    dicUrl: `/tag/list`, dicMethod: 'get', props: { label: "name", value: "id" }, },

                                { prop: "status", label: `${this.i18n.t('status')}`, search: true, hide: false, value: 0, type: "radio", dicData: statusData, width: '80', },

                                { prop: "isTop", label: `${this.i18n.t('is_top')}`, search: true, hide: false, value: 0, type: "radio", dicData: yesnoData, width: '80', },
                                { prop: "isFeatured", label: `${this.i18n.t('is_featured')}`, search: true, hide: false, value: 0, type: "radio", dicData: yesnoData, width: '80', },
                               
                                { prop: "viewCount", label: `${this.i18n.t('view_count')}`, search: false, hide: false, value: 0, type: "number" , width: '80', },
                                { prop: "likeCount", label: `${this.i18n.t('like_count')}`, search: false, hide: false, value: 0, type: "number" , width: '80', },

                                { prop: "isCommentAllowed", label: `${this.i18n.t('is_comment_allowed')}`, search: true, hide: false,value: 0,type: "radio", dicData: yesnoData, width: '80', },
                                { prop: "commentsCount", label: `${this.i18n.t('comments_count')}`, search: false, hide: false, value: 0, type: "number", dicData: yesnoData, width: '80', },

                                { prop: "sort", label: `${this.i18n.t('sort')}`, search: false, hide: false, type: "number", step: 100, value: 100,width: '80', clearable: true },

                                { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, width: '80',minWidth: 140, },
                            ]
                        },
                        
                    dictValueDialogVisible: false,
                    dialogtitle:"",
                    dictValueUrl: "",
                    url: "/Article/edit?id=",
                    }
                },
                created() {
                },
                // mounted() {
                //     window.closeArticleDialog = () => this.$emit('close');
                // },
                methods: {
                    cellStyle({ row, column, rowIndex, columnIndex }) {
                           if (column.property === 'status') {
                               return  { color: row.status == 1 ? '#409eff' : '#f56c6c' };
                           }
                           else if (column.property === 'isTop') {
                               return  { color: row.isTop == 0 ? '#409eff' : '#f56c6c' };
                           }  
                           else if (column.property === 'isFeatured') {
                               return  { color: row.isFeatured == 0 ? '#409eff' : '#f56c6c' };
                           }
                           else if (column.property === 'isCommentAllowed') {
                               return  { color: row.isCommentAllowed == 0 ? '#409eff' : '#f56c6c' };
                           }
                    },
                    hasPermission(key) {
                        if (key === 'columnBtn' || key === 'menu' || key === 'refreshBtn') return true;
                        else return Permissions.avePermission(`${this.name}:${key}`);
                    },
                    onLoad(page, done) {
                        var data = { ...page, ...this.searchParams , ...{ PId:0 }};
                        this.$http.post(`${this.pageUrl}`, data).then((res) => {
                            this.tableData = res.rows;
                            this.pageOption.total = res.totalRows;
                            this.loading = false;
                            if (done) { done(); }
                        }).catch(e => {
                            this.loading = false;
                            console.log(e);
                        });
                    },
                    searchChange(params, done) {
                        this.searchParams = params;
                        this.pageOption.page = 1;
                        this.onLoad(this.pageOption, done);
                    },
                    resetChange(item) {
                        this.searchParams = item;
                        this.pageOption.page = 1;
                        this.onLoad(this.pageOption);
                    },
                    refreshChange() { this.onLoad(this.pageOption); },

                    handleDictValue(row,index,type)
                    {
                        if(type=='add'){
                            this.dialogtitle=`[${this.i18n.t('add')}]`
                            this.dictValueUrl = Vue.prototype.$baseURL+this.url + 0+"&type="+type;
                            this.dictValueDialogVisible = true;
                        }
                        else if(type=='edit'){
                            this.dialogtitle=`[${this.i18n.t('edit')}]`
                            this.dictValueUrl = Vue.prototype.$baseURL+this.url + row.id+"&type="+type;
                            this.dictValueDialogVisible = true;
                        }
                        else if(type=='view'){
                            this.dialogtitle=`[${this.i18n.t('view')}]`
                            this.dictValueUrl = Vue.prototype.$baseURL+this.url + row.id+"&type="+type;
                            this.dictValueDialogVisible = true;
                        }
                    },
                    onClose() {
                        this.dictValueDialogVisible = false;
                        this.refreshChange();
                    },
                    handleRowSave(form, done, loading) {
                        form.confirm = form.password;
                        this.$http.post(`${this.addUrl}`, form).then((res) => {
                            loading();
                            if (res == true) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                done(form);
                                this.pageOption.page = 1;
                                this.onLoad(this.pageOption);
                            }
                        }).catch(e => {
                            loading();
                        });
                    },
                    handleRowUpdate(row, index, done, loading) {
                        if (row.pId === row.id) {
                            this.$message.error(this.i18n.t('parent_node_cannot_select_self'));
                            loading();
                            return;
                        }
                        this.$http.post(`${this.editUrl}`, row).then((res) => {
                            loading();
                            if (res == true) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                done(row);
                                this.refreshChange();
                            }
                        }).catch(e => {
                            loading();
                        });
                    },
                    handleRowDel(form, index, done) {
                        this.$confirm(this.i18n.t('confirmdelete'), this.i18n.t('tips'), { confirmButtonText: this.i18n.t('determine'), cancelButtonText: this.i18n.t('cancel'), type: 'warning', customClass: "elmessagebox" }).then(() => {
                            let data = { id: form.id };
                            this.$http.delete(`${this.deleteUrl}`, { data, headers: { 'Content-Type': 'application/json' } }).then((res) => {
                                if (res == true) {
                                    this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                    done(form)
                                }
                            });
                        }).catch(_ => { loading(); console.info(_); })
                    }
                }
            });
    </script>
</body>
</html>